<template>
    <div :style="{ 'height': footHeight }" class="home-foot-container">
        <img class="home-foot-img" src="../../assets/imgs/images/Group 26086148.png" alt="">
        <img @click="openTab" style="width: 16px;height: 16px;cursor: pointer;"
            src="../../assets/imgs/icon/Group 26086154.png" alt="">
        <div
            style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;flex: 1;align-items: center;">
            <div style="color: #fff;">节点</div>
            <el-button class="home-foot-btn">Need Faster</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useVpnStore } from '../../store/index.js'


const store = useVpnStore()
const footHeight = ref('120px')

const openTab = () => {
    if (footHeight.value === '120px') {
        footHeight.value = '90%'
    } else {
        footHeight.value = '120px'
    }
}
onMounted(() => {
    console.log(store.bestConnectionLine, '123!!!!!!!!!!!');
})
</script>

<style lang="scss" scoped>
.home-foot-container {
    // height: 120px;
    border-radius: 60px 60px 0 0;
    background-color: #1A1A1D;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 30px;
    align-items: center;

    .home-foot-img {
        width: 91px;
        height: 91px;
        position: absolute;
        left: 35px;
        top: -40px;
    }

    .home-foot-btn {
        width: 120px;
        height: 30px;
        background-color: #107DFB;
        color: #fff;
        border: none;
    }
}
</style>